<template>
  <div id="app">
    <h2>条件判断指令</h2>
    <!-- vue提供了v-if和v-show两个条件判断指令，他俩都可以控制元素的显示和隐藏 -->
    <p v-if="flag">通过if控制的元素</p>
    <p v-show="flag">通过show控制的元素</p>

    <h2>if进行多条件判断</h2>
    <p v-if="age < 18">未成年禁止进入</p>
    <p v-else-if="age >= 18 && age < 40">欢迎光临</p>
    <p v-else>尽量别来了</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true,
      age: 20
    }
  }
}
</script>

<style></style>
